<script lang="ts" setup>
import { signin } from '@/api/login'
import router from '@/router'
import { useUserStore } from '@/stores'
import { computed, reactive } from 'vue'

interface resLogin {
  access_token: string
}
const userStore = useUserStore()
const loginInfo = reactive({
  username: '',
  usernameMsg: computed(() => {
    // if (
    //   loginInfo.username !== '' &&
    //   !/[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/gim.test(loginInfo.username)
    // ) {
    //   return '请输入正确的邮箱地址'
    // }
    // return ''
    if (loginInfo.username !== '' && loginInfo.username.length < 6) {
      return '账号的长度不能小于6位数'
    }
    return ''
  }),
  password: '',
  passwordMsg: computed(() => {
    if (loginInfo.password !== '' && loginInfo.password.length < 6) {
      return '密码的长度不能小于6位数'
    }
    return ''
  })
})
const subLogin = async () => {
  const res = (await signin(
    loginInfo.username,
    loginInfo.password
  )) as unknown as resLogin
  if (res.access_token) {
    // 存储token到pinia上
    //1. 直接赋值：只能一个一个改，在vue2可能会遇到响应式问题，vue3不会；直接赋值的方式，通常不会被框架的开发工具自动追踪，除非手动添加一些调试代码。
    // userStore.token = res.access_token
    //2. $patch：可以同时在一个对象中更新多个属性，且这些操作会同时生效，确保状态的一致性。比上一种性能更加优化，并且有历史记录(如调试)
    // userStore.$patch({
    //   token: res.access_token,
    //   username:loginInfo.username
    // })
    userStore.setToken(res.access_token)
    userStore.setUsername(loginInfo.username)
    // 路由跳转到home => 重定向：/home/dashboard
    router.push('/home') //小bug：明明地址栏都变了，就是没跳转过去
  }
}
</script>

<template>
  <!--container d-flex justify-content-center: 容器盒子，弹性布局，沿主轴居中对齐  -->
  <div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="col-12 col-sm-8 col-lg-6 col-xl-4 col-xxl-4">
      <form class="border shadow-sm rounded p-4">
        <legend class="d-flex justify-content-center">登录</legend>
        <!-- mb-3: 底部外边距 -->
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">用户名：</label>
          <input
            type="email"
            :class="['form-control', { 'is-invalid': loginInfo.usernameMsg }]"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            v-model="loginInfo.username"
          />
          <div class="invalid-feedback">
            {{ loginInfo.usernameMsg }}
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">密码：</label>
          <input
            type="password"
            :class="['form-control', { 'is-invalid': loginInfo.passwordMsg }]"
            id="exampleInputPassword1"
            v-model="loginInfo.password"
          />
          <div class="invalid-feedback">
            {{ loginInfo.passwordMsg }}
          </div>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1" />
          <label class="form-check-label" for="exampleCheck1">记住我</label>
        </div>
        <div class="d-flex flex-column align-items-center px-1">
          <button
            type="button"
            class="btn btn-primary w-100 mb-2 text-light"
            @click="subLogin()"
          >
            登录
          </button>
          <!-- 声明式导航:动态路由传参 <router-link to="/register" > -->
          <router-link
            to="/register"
            class="border rounded w-100 text-decoration-none text-center"
          >
            <button type="submit" class="btn w-100">注册</button>
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<style></style>
